<template>
  <div class="container">
    <el-form :inline="true" :model="searchWords" class="search">
      <el-form-item>
        <el-select
          v-model="searchWords.questionType"
          clearable
          placeholder="题目类型"
          style="width: 100px"
        >
          <el-option
            v-for="item in questionTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchWords.questionBankTypeId"
          placeholder="题库类型"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.questionTypeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input
          style="width: 250px"
          clearable
          placeholder="题目"
          v-model="searchWords.questionSubject"
        />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="initList(1)" />
      </el-form-item>
    </el-form>
    <div class="containList">
      <div
        class="model"
        v-for="(item, index) in tableData.data"
        :key="item?.id"
      >
        <div class="model_txt">
          <div class="model_subject">
            {{ index + 1 }}、{{ item.questionSubject }}
          </div>
          <div class="model_option">
            <div
              v-for="items in item.optionMiniResponses"
              :key="items.id"
              style="margin: 5px 0"
            >
              <div v-if="items.optionType == 1">
                {{ items.questionOption }}、{{ items.optionContent }}
              </div>
              <div
                v-if="items.optionType == 2"
                style="display: flex; float: left; margin: 15px 15px 15px 0"
              >
                <div style="margin: auto 0">{{ items.questionOption }}、</div>
                <el-image
                  v-if="items.optionContent"
                  style="width: 60px; height: 60px"
                  :src="baseURL + items.optionContent"
                />
              </div>
            </div>
          </div>
          <div class="icon_img">{{ item.questionTypeName }}</div>
          <div class="model_answer">
            答案：{{ item.rightStrQuestionOptions }}
          </div>
        </div>
        <div class="model_btn">
          <el-button
            size="small"
            plain
            :icon="Edit"
            type="warning"
            @click="edit(item)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            plain
            :icon="props.state == 2 ? Delete : Edit"
            :type="props.state == 2 ? 'danger' : 'warning'"
            @click="del(item)"
          >
            {{ props.state == 2 ? "移除" : "加入题库" }}
          </el-button>
        </div>
      </div>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
    <EditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      :parent-menu-option="tableData.data"
      @submit="initList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import Page from "@/components/pageTable/Page.vue";
import EditForm from "@/views/databaseManage/databaseList/components/EditForm.vue";
import { baseURL } from "@/util/request";
import {
  pageQuestionImportDetail,
  removeQuestion,
  selectQuestionImportDetailById,
} from "@/api/databaseManage.ts";
import {selectQuestionTypes} from "@/api/system.ts";

let rowData: any;
const editFormVisible = ref<boolean>(false);
const typeList = ref<[]>([]);
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});
const questionTypeList = [
  { value: "1", label: "单选题" },
  { value: "2", label: "多选题" },
  { value: "3", label: "判断题" },
];
const searchWords = reactive({
  questionType: "",
  questionSubject: "",
  questionBankTypeId: "",
});
const props = defineProps({
  state: {
    type: String,
    default: "",
    required: true,
  },
});
const tableData = reactive({
  columns: [
    { label: "状态", prop: "publishState", width: 80, template: true },
    { label: "标题", prop: "videoName", width: 150 },
    { label: "分类", prop: "typeName", width: 150 },
    { label: "置顶", prop: "isTop", width: 120, template: true },
    { label: "发布/撤回时间", prop: "publishDate", width: 160, template: true },
    { label: "操作", prop: "operation", template: true, width: 280 },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList(page: number) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: pageData.pageNum || 1,
    pageSize: pageData.pageSize,
    questionState: props.state,
    ...searchWords,
  };
  tableData.loading = true;
  const { data, msg, success } = await pageQuestionImportDetail(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}

async function getTypeList() {
  const { data, msg, success } = await selectQuestionTypes({
    isComprehensive: true,
  });
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  typeList.value = data;
}

async function edit(row: any) {
  const { data, msg, success } = await selectQuestionImportDetailById({
    questionId: row.id,
  });
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  rowData = data;
  editFormVisible.value = true;
}

async function del(row: any) {
  ElMessageBox.confirm(
    `是否${props.state == 2 ? "移除" : "加入题库"}?`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    },
  ).then(async () => {
    tableData.loading = true;
    const { success, msg } = await removeQuestion({
      id: row?.id,
      isAdd: props.state == 2 ? false : true,
    });
    if (!success) {
      tableData.loading = false;
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList(1);
  });
}

onMounted(async () => {
  await getTypeList();
  await initList(pageData.pageNum);
});

watch(pageData, async () => {
  await initList(pageData.pageNum);
});
watch(searchWords, async () => {
  await initList(1);
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
.containList {
  width: 800px;
  height: calc($router-component-contain-height - 125px);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #eee;
  overflow-y: auto;
}
.model {
  margin: 10px 20px;
  display: flex;
  position: relative;
  .model_txt {
    width: 600px;
    border: 1px solid #ccc;
    display: block;
    padding: 10px 20px;
    .model_option {
      margin: 5px 0 0 25px;
    }
    .icon_img {
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 5px 10px;
      background-image: url("@/assets/images/icon_questionType.png");
      background-size: 100% 100%;
      font-size: 12px;
    }
    .model_answer {
      clear: left;
      text-align: right;
      margin-top: 10px;
    }
  }
  .model_btn {
    display: flex;
    margin: auto 10px;
  }
}
</style>
